<template>
    <div id="login-index" class="login-box">
        <div class="login-logo">
            <p class="title">悦夜管理后台</p>
        </div>
        <div class="login-form">
            <el-form :model="loginForm" :rules="loginFormRules" status-icon ref="loginForm" class="demo-ruleForm">
                <el-form-item prop="username">
                <el-input type="text" placeholder="请输入账号" v-model="loginForm.username" suffix-icon="el-icon-message" @keyup.enter.native="submitForm"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="loginForm.password" suffix-icon="el-icon-message" @keyup.enter.native="submitForm"></el-input>
                </el-form-item>
                <!--<el-form-item prop="captcha">-->
                <!--<el-input class="login-code" type="text" placeholder="请输入验证码" v-model="loginForm.captcha" @keyup.enter.native="submitForm"></el-input>-->
                <!--<el-button style="float: right;" type="primary" @click="getCode">获取验证码</el-button>-->
                <!--</el-form-item>-->
                <el-form-item label-width="230px">
                <el-button type="primary" @click="submitForm">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
export default {
    name: 'login-index',
    data () {
        return {
            // fullscreenLoading: false,
            loginForm: {
                username: '',
                password: '',
                captcha: ''
            },
            // 校验规则
            loginFormRules: {
                username: {
                    required: true,
                    message: '账号不能为空'
                },
                password: {
                    required: true,
                    message: '密码不能为空'
                }
                // captcha: {
                //     required: true,
                //     message: '验证码不能为空'
                // }
            }
        }
    },
    methods: {
        // 登录
        submitForm () {
            this.$refs.loginForm.validate((valid) => {
                // 校验失败
                if (!valid) {
                    return false
                }
                let data = 'username=' + this.loginForm.username + '&password=' + this.loginForm.password + '&captcha=1'
                this.$store.dispatch('postLogin', data)
            })
        },
        getCode () {
            this.$message({
                message: '获取验证码',
                type: 'success'
            })
        },
        // 登录接口
        postLogin () {
            // let data = {
            //     username: this.loginForm.username,
            //     password: this.loginForm.password,
            //     captcha: '1'
            // }
            let data = 'username=' + this.loginForm.username + '&password=' + this.loginForm.password + '&captcha=1'
            this.$api.login.postLogin(data, res => {
                // 隐藏加载动画
                if (res.code === 200) {
                    // 跳转到欢迎页面
                    // this.$router.push({ name: 'readme' })
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        // 获取用户信息
        getInfo () {
            this.$api.login.getInfo(res => {
                if (res.code === 200) {
                } else {
                    // this.$router.push({
                    //     path: '/login'
                    // })
                    // this.$message.error('请重新登录')
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    body {
        background: #fff;
    }
    .login-box {
        width: 300px;
        margin: 7% auto;

        .login-logo {
            font-size: 35px;
            text-align: center;
            margin-bottom: 25px;
            font-weight: 300;
            .title {
                color: #444;
            }
        }
        .login-code{
            width: 180px;
        }
    }
</style>
